const path = require('path')
// 导入在内存中自动生成 index 页面的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 创建应插件的实例
const htmlPlugin = new HtmlWebpackPlugin({
  template: path.join(__dirname, './src/index.html'),// 源文件
  filename: 'index.html'  // 生成的内存中首页的名称
})

// 向外暴露一个打包的配置对象，
module.exports = {
  mode: 'development',
  // 在webpack4.x中，默认预定入口文件是 src/index.js
  plugins: [
    htmlPlugin
  ],
  module: { // 所有第三方 模块的配置规则
    rules: [ // 第三方匹配规则
      {
        test: /\.js|jsx$/,  /** 处理js和jsx */
        use: 'babel-loader',
        exclude: /node_modules/ // 排除
      },
      {
        test: /\.css$/, /** 处理css webpack是从右往左处理的 */ 
        use: ['style-loader', 'css-loader'] /** 为 css-loader 加上参数modules表示css可以导出， */
      },
      {
        test: /\.ttf|woff|eot|svg$/, use: 'url-loader'  /** 处理字体*/
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx', 'json'], /** 表示这几个文件的后缀名可以不用谢 */
    alias: {
      '@': path.join(__dirname, './src') /** 这样，@ 就表示项目根目录中的 src 目录 */
    }
  }
}